<template>
	<view>
		<view class="status_bar"></view>
		<view style="display: flex; align-items: center; height: 88rpx; position: relative;">
			<image src="/static/indicator-back.png" style="width: 48rpx; height: 48rpx; position: absolute; top: 20rpx; left: 32rpx;" @tap="navBack"></image>
			<view style="font-size: 36rpx; font-weight: 600; flex: 1; text-align: center;">更改昵称</view>
			<view style="position: absolute; right: 32rpx; top: 16rpx;" class="right-nav-button"
				@tap="updateNickname">
				<view class="content">保存</view>
			</view>
		</view>
		
		<view style="margin: 48rpx 32rpx 0 32rpx; border-radius: 16rpx; background: rgba(250, 250, 250, 1); height: 100rpx;display: flex; align-items: center; padding-left: 32rpx; padding-right: 32rpx;" >
			<input v-model="user.name" placeholder="请输入昵称" style="flex: 1;"/>
			<image src="/static/clear.png" style="width: 40rpx; height: 40rpx;"></image>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import { http } from '@/utils/request'
	import { onMounted } from 'vue'
	
	const user = reactive({
		name: '',
	})
	
	
	const navBack = ()=>{
		uni.navigateBack();
	}
	
	const getUserInfo = ()=>{
		http.request({
			url: '/app/user/login_user',
			method: 'GET'
		}).then(resp => {
			Object.assign(user, resp.data);
		})
	}
	
	
	const updateNickname = ()=>{
		http.request({
			url: '/app/user/updateName',
			method: 'POST',
			data: {
				name: user.name
			}
		}).then(resp => {
			uni.showToast({
				title: "修改成功",
				icon: 'none'
			})
			uni.$emit("app_update_user_info");
			uni.navigateBack();
		})
	}
	
	onMounted(()=>{
		getUserInfo();
	})
	
</script>

<style lang="scss" scoped>
	.right-nav-button {
		height: 56rpx; 
		border-radius: 28rpx;
		width: 104rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(90deg, rgba(73, 246, 252, 1) 0%, rgba(197, 255, 89, 1) 100%);
		
		.content {
			font-size: 28rpx;
			color: rgba(51, 51, 51, 1);
		}
	}
	
</style>